<template>
	<u-popup ref="refPopupRule" :round="10" :show="value" :closeOnClickOverlay="false" type="center" @close="handleClose" mode="center" class="popupRulebox">
		<view class="rule_box">
			<text class="rule_title">油枪</text>
			<scroller class="list_box_content_wrapper">
				<view class="list_box_content">
					<view :class="index===chooseIndex?'choosed':''" @click="handleClick(item,index)"
						v-for="(item,index) in list" :key="item.gunNo" class="gun-content">
						<image class="coupon" src="/static/gun.png" />
						<text class="rule_text">
							{{item.gunName}} #{{item.commodityCode}}
						</text>
					</view>

				</view>
			</scroller>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "gunModel",
		props: {
			value: {
				default: () => {
					return false
				}
			},
			data:{
				default:()=>{
					return []
				}
			}
		},
		computed: {
			list() {
				return this.data.length!==0?this.data:this.$store.state.gunNoList
			}
			
		},
		mounted() {console.log('eeeeee')
			
		},
		data() {
			return {
				chooseIndex: null
			};
		},
		methods: {
			handleClick(arg, arg1) {
				this.chooseIndex = arg1
				const obj = this.list[arg1]
				this.$emit('handleClick', obj)
			},
			handleClose() {
				this.$emit('input', false)
			}
		}
	}
</script>

<style>
	.popupRulebox {
		padding: 0 0.0upx;
	}

	.rule_box {
		background-color: #FFFFFF;
		border-radius: 20.0upx;
		padding: 30.0upx;
		margin: 0 10upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.rule_footer_btn_modal {
		padding: 20.0upx 200.0upx;
		text-align: center;
		border-radius: 40.0upx;
		background-image: linear-gradient(to bottom, #5b95ff ,#0151fd);
		color: #FFFFFF;
		font-size: 32.0upx;
	}





	.coupon {
		width: 38.0upx;
		height: 38.0upx;
	}


	.choosed {


		background: #DFEBFF;
		box-shadow: 0px 4.0upx 4.0upx 0px rgba(2, 38, 102, 0.15);
		border-radius: 8.0upx;
		opacity: 1;
		border: 1px solid #0151fd;
	}


	.rule_footer_btn {
		width: 700.0upx;
		height: 96.0upx;
		background: linear-gradient(to right, #4F92F7, #446BF2);
		border-radius: 12.0upx;
		color: #ffffff;
		text-align: center;
		line-height: 96.0upx;
		opacity: 1;
		font-size: 32.0upx;
	}

	.list_box_content_wrapper {
		height: 700.0upx;
		width: 550.0upx;
		flex: 1;
		overflow-y: scroll;
	}

	.list_box_content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		/* justify-content: space-around; */
	}

	.rule_text {
		font-size: 32.0upx;
		color: #666;
		margin-left: 10.0upx;
	}

	.gun-content {

		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80.0upx;
		background: #FFFFFF;
		box-shadow: 0px 4.0px 4.0upx 0px rgba(2, 38, 102, 0.15);
		border-radius: 8.0upx;
		border: 2.0upx solid rgba(0, 0, 0, 0);
		opacity: 1;
		padding: 20.0upx 10.0upx;
		
		margin: 20.0upx 16.0upx;
		width: 242.0upx;
		line-height: 80.0upx;
		text-align: center;

	}
</style>